<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogVisible"
    append-to-body
    width="650px"
    @close="close"
  >
    <!-- 如果没头像 则上传 -->
    <el-row :gutter="10" class="upload-avatar">
      <el-col :lg="4" :md="4" :sm="24" :xl="4" :xs="24">
        <label class="el-button el-button--primary el-button--small" for="uploads">上传头像</label>
        <input
          id="uploads" ref="uploadImg"
          accept="image/png,image/jpeg,image/gif,image/jpg"
          multiple
          type="file"
          @change="uploadImg($event)"/>
      </el-col>
      <el-col :lg="20" :md="20" :sm="24" :xl="20" :xs="24">
        <div class="description-text">
          支持JPG、PNG等格式图片
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
        <div class="avatar-cropper">
          <vue-cropper
            ref="cropper"
            :autoCrop="options.autoCrop"
            :autoCropHeight="options.autoCropHeight"
            :autoCropWidth="options.autoCropWidth"
            :canMove="options.canMove"
            :canMoveBox="options.canMoveBox"
            :canScale="options.canScale"
            :fixed="options.fixed"
            :fixedBox="options.fixedBox"
            :fixedNumber="options.fixedNumber"
            :img="options.img"
            :info="true"
            :maxImgSize="options.maxImgSize"
            :outputSize="options.size"
            :outputType="options.outputType"
            @real-time="realTime"
          >
          </vue-cropper>
        </div>
      </el-col>

      <el-col :lg="11" :md="11" :xl="11" class="hidden-sm-and-down">
        <div class="avatar-preview">
          <div :style="previews.div"
               class="preview preview-circle">
            <img :src="previews.url" :style="previews.img"/>
          </div>
          <div :style="previews.div"
               class="preview">
            <img :src="previews.url" :style="previews.img"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24" class="avatar-button">
        <el-button icon="el-icon-plus" round @click="changeScale(1)">放大</el-button>
        <el-button icon="el-icon-minus" round @click="changeScale(-1)">缩小</el-button>
        <el-button icon="el-icon-refresh-left" round @click="turnLeft">左转</el-button>
        <el-button icon="el-icon-refresh-right" round @click="turnRight">右转</el-button>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import {doUpdateAvatar} from '@/api/system/user/userManagement'
import {doUpload} from '@/api/tool/ossTool'
import axios from "axios";
import {baseURL, requestTimeout} from "@/config";
import store from "@/store";

export default {
  name: "AvatarEdit",
  components: {
    VueCropper
  },
  data() {
    return {
      title: "上传头像",
      instance: null,
      dialogVisible: false,
      downImg: "#",
      id: null,
      confirmLoading: false,
      options: {
        img: "",
        imgName: "",
        info: true,
        size: 1,
        outputType: 'image/jpeg',
        suffixName: '.jpg',
        canScale: true,
        canMove: true,
        canMoveBox: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 200,
        autoCropHeight: 200,
        maxImgSize: 1048,
        fixedBox: false,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
      },
      previews: {},
    };
  },
  created() {
    this.instance = axios.create({
      baseURL,
      timeout: requestTimeout,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  },
  methods: {
    showAvatarEdit(row) {
      let _this = this;
      this.dialogVisible = true;
      this.id = row.id;
      // 其中this.avatar为当前头像
      this.setAvatarBase64(row.avatar, (base64) => {
        _this.options.img = base64;
      });
    },
    close() {
      this.id = null;
      this.options.img = "";
      this.options.imgName = "";
      this.dialogVisible = false;
    },
    turnLeft() {
      this.$refs.cropper.rotateLeft();
    },
    turnRight() {
      this.$refs.cropper.rotateRight();
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    save() {
      this.$refs.cropper.getCropBlob(data => {
        let blobObject = new Blob([data]);

        let fileTemp = new window.File(
          [blobObject],
          this.options.imgName,
          {type: this.options.outputType}
        );

        this.doUpdateAvatarAsync(fileTemp);
      });
    },
    async doUpdateAvatarAsync(file) {
      this.confirmLoading = true

      let formData = new window.FormData()
      formData.append("file", file);

      const {data} = await doUpload(formData);
      if (data) {
        const {msg} = await doUpdateAvatar({
          imgUrl: data.fileStoragePath
        });

        // 刷新用户信息
        await store.dispatch("user/getUserInfo");
        // 刷新父类信息
        await this.$emit("fetchData");
        this.confirmLoading = false
        this.close()
        this.$baseMessage(msg, "success");
      }
    },
    uploadImg(e) {
      //上传图片
      // this.option.img
      let file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$baseMessage("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种", "error");
        return false;
      }

      // 去掉默认后缀名 统一后缀名
      this.options.imgName = file.name.split('.')[0] + this.options.suffixName;

      let reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        this.options.img = data;
        this.$refs.uploadImg.value = '';
      };
      // 转化为base64
      //reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    realTime(data) {
      this.previews = data;
    },
    // 设置头像base64
    setAvatarBase64(src, callback) {
      let _this = this;
      let image = new Image();
      // 处理缓存
      image.src = src + '?v=' + Math.random();
      // 支持跨域图片
      image.crossOrigin = "anonymous";
      image.onload = function () {
        let base64 = _this.transBase64FromImage(image);
        callback && callback(base64);
      }
    },
    // 将网络图片转换成base64格式
    transBase64FromImage(image) {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, image.width, image.height);
      // 可选其他值 image/jpeg
      return canvas.toDataURL(this.options.outputType);
    },
  }
};
</script>
<style lang="scss" scoped>

.upload-avatar {
  padding-bottom: 15px;

  .el-col {
    height: 32px;
    line-height: 32px;

    input {
      display: none;
    }

    .description-text {
      font-size: 13px;
      color: #9194ab;
    }
  }
}

.avatar-button {
  .el-button--small.is-round {
    padding: 9px 12px;
  }
}

/* 裁剪工具 */
.avatar-cropper {
  width: 325px;
  height: 325px;
  margin: 0 auto;
}

/* 右侧预览项 */
.avatar-preview {
  .preview {
    margin: 0 auto;
    overflow: hidden;
    background-image: url();
    box-shadow: 0 0 4px #ccc;
    width: 150px !important;
    height: 150px !important;
  }

  .preview:first-child {
    margin-bottom: 22px;
  }

  .preview-circle {
    border-radius: 50%;
  }
}

/* 底部按钮 */
.avatar-button button {
  margin-top: 10px;
  margin-bottom: 10px;
}

@media screen and (max-width: 550px) {
  .avatar-cropper {
    width: 260px;
    height: 260px;
  }
}
</style>
